<template>
  <div>
    <div class="query">
      <div>
        <el-button
          v-if="$route.query.id"
          type="primary"
          @click="$router.go(-1)"
          class="add"
          >返回上一级</el-button
        >
        <el-button type="primary" @click="onSort" class="add"
          >保存排序</el-button
        >
        <el-button type="primary" @click="showModal" class="add"
          >新增分类</el-button
        >
      </div>
    </div>
    <div class="table-box">
      <div class="title-box">
        <div class="item">分类</div>
        <div class="item">包含子分类数</div>
        <div class="item">包含道具数</div>
        <div class="item">图片</div>
        <div class="item">操作</div>
      </div>
      <div class="content-box">
        <div
          class="dragging-item"
          v-for="(item, index) in tableData"
          v-dragging="{ item: item, list: tableData }"
          :key="index"
        >
          <div class="item">
            {{ item.name }}
          </div>
          <div class="item">
            {{ item.subCount }}
          </div>
          <div class="item">
            {{ item.containSkinCount }}
          </div>
          <div class="item">
            <span v-if="!item.pic">暂无</span>
            <el-image :src="item.pic" v-else>
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <div class="item">
            <el-button type="text" size="small" @click="toDetail(item)"
              >详情</el-button
            >
            <el-button type="text" size="small" @click="showModal(item)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="showDelModal(item)"
              >删除</el-button
            >
          </div>
        </div>
        <div class="nodata" v-if="!tableData.length">暂无数据</div>
      </div>
    </div>
    <div class="tools" v-if="tableData.length > query.pageSize">
      <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      >
      </el-pagination>
    </div>
    <Modal
      :visible="visible"
      :ruleForm="ruleForm"
      :closeHandel="closeHandel"
      :submitHandel="submitHandel"
      :change="changeOnAdd"
      :defaultProps="defaultProps"
      :selector="[...selector]"
    />
    <el-dialog
      title="系统提示"
      :visible.sync="deldialogVisible"
      width="30%"
      :before-close="deldialogHandleClose"
    >
      <span>确认要删除这个分类吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deldialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Modal from './categroyModal'
const initForm = {
  pic: '',
  name: '',
  status: 1,
  parentId: 0
}
export default {
  components: {
    Modal
  },
  data () {
    return {
      selector: [],
      deldialogVisible: false,
      visible: false,
      ruleForm: Object.assign({}, initForm),
      tableData: [],
      listTotal: null,
      query: {
        parentId: 0
      },
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'nodePath',
        checkStrictly: true
      }
    }
  },
  watch: {
    $route (to, from) {
      this.query.parentId = to.query.id || 0
      this.fetchList()
      console.log(to)
    }
  },
  mounted () {
    this.fetchList()
    this.fetchSelector()
  },
  methods: {
    async fetchList () {
      const result = await this.$http.get('/peace/selectPeaceType', {
        params: this.query
      })
      if (result.code !== '0') {
        this.$message.error(result.desc)
        return
      }
      this.tableData = result.data
      this.listTotal = result.count
    },
    async fetchSelector () {
      const result = await this.$http.post('peace/selector', {
        type: 0
      })
      if (result.code !== '0') {
        this.$message.error(result.desc)
        return
      }
      this.selector = result.data.props
    },
    async updatePeaceSkinInfo () {
      const result = await this.$http.post(
        '/peace/updatePeaceTypeInfo',
        this.ruleForm
      )
      if (result.code !== '0') {
        this.$message.error(result.desc)
      }
    },
    async onSort () {
      this.$confirm('排序将即时生效到客户端, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const result = await this.$http.post(
            '/peace/updatePeaceTypeSort',
            this.tableData
          )
          if (result.code !== '0') {
            this.$message.error(result.desc)
          }
          this.$message.success('保存成功！')
        })
        .catch(() => {})
    },
    pageChange (page) {
      this.query.pageNum = page
      this.fetchList()
      console.log(page)
    },
    sizeChange (size) {
      this.query.pageSize = size
      this.fetchList()
    },
    onSubmit () {
      console.log('submit!')
    },
    showModal (item) {
      this.visible = true
      if (!item.name) {
        this.ruleForm = Object.assign({}, initForm)
        this.ruleForm.modalType = 'add'
        this.ruleForm.title = '新增分类'
        return
      }
      this.ruleForm.modalType = 'edit'
      this.ruleForm.title = '编辑分类'
      // this.formatType(this.ruleForm.typeList)
      this.ruleForm = Object.assign({}, this.ruleForm, item)
      console.log(this.ruleForm)
    },
    closeHandel () {
      this.visible = false
    },
    deldialogHandleClose () {
      this.deldialogVisible = false
    },
    // 提交
    async submitHandel () {
      if (this.ruleForm.type instanceof Array) {
        this.ruleForm.type = this.ruleForm.type.pop()
      }
      if (this.ruleForm.modalType === 'add') {
        const result = await this.$http.post(
          '/peace/addPeaceType',
          this.ruleForm
        )
        if (result.code !== '0') {
          this.$message.error(result.desc)
        }
        this.fetchList()
        this.closeHandel()
        return
      }
      await this.updatePeaceSkinInfo()
      this.fetchList()
      this.closeHandel()
    },
    changeOnAdd (data) {
      this.ruleForm.parentId = data[data.length - 1]
    },
    showDelModal (row) {
      this.currentType = row
      this.deldialogVisible = true
    },
    // 删除
    async del () {
      // console.log(this.currentType)
      const result = await this.$http.get('/peace', {
        params: this.currentType
      })
      if (result.code !== '0') {
        this.$message.error(result.desc)
      }
      this.fetchList()
      this.deldialogHandleClose()
    },
    // 级联回选格式化数据
    formatType (type) {
      let selectorVal = []
      type.reduce((prev, cur, index) => {
        if (prev) {
          selectorVal.push(prev + '-' + cur)
          return prev + '-' + cur
        } else {
          selectorVal.push(cur + '')
          return cur
        }
      }, '')
      this.ruleForm.type = selectorVal
    },
    // 详情
    toDetail (item) {
      this.$router.push(`/equip/categroy?id=${item.id}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.query {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.tools {
  margin-top: 15px;
  padding-right: 20px;
  display: flex;
  justify-content: flex-end;
}
.nodata {
  display: flex;
  padding: 50px;
  color: #ccc;
  font-size: 14px;
  justify-content: center;
}
.table-box {
  margin: 20px 0;
  border: 1px solid #ebeef5;
  border-bottom: none;
  border-right: none;
  .title-box {
    display: flex;
    border-bottom: 1px solid #ebeef5;
    .item {
      display: flex;
      align-items: center;
      flex: 1;
      padding: 10px;
      height: 60px;
      font-size: 14px;
      color: #909399;
      font-weight: bold;
      border-right: 1px solid #ebeef5;
    }
  }

  .content-box {
    .dragging-item {
      display: flex;
      border-bottom: 1px solid #ebeef5;
      .item {
        flex: 1;
        padding: 10px;
        font-size: 14px;
        color: #606266;
        display: flex;
        align-items: center;
        border-right: 1px solid #ebeef5;
      }
    }
  }
}
</style>
